<template>
  <div :id="id" class="h-full w-full"></div>
</template>

<route lang="json">
{
  "meta": {
    "title": "锚点管理"
  }
}
</route>

<script setup lang="tsx">
import { onMounted, useId } from 'vue';
import { useScript } from '@unhead/vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const id = useId();

const { onLoaded, onError } = useScript(
  'https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js',
);

onMounted(() => {
  console.log('onMounted');
});

onLoaded(async () => {
  console.log('onLoaded');
  const res = await axios({
    url: '/bimface/oauth2/token',
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Basic ${btoa('793VOEAE4jJGrgiIZHSfFry1I5eYlsCQ:Sy6GPuQOTHB9SOelAYFRIg3FFS9eJaFI')}`,
    },
  });
  const access_token = res.data.data.token;
  console.log(access_token);
  const viewRaw = await axios({
    url: '/bimface/view/token',
    params: { fileId: '10000910901686' },
    headers: {
      Authorization: `Bearer ${access_token}`,
    },
  });
  const viewToken = viewRaw.data.data;
  renderBim(viewToken);
});

const renderBim = (viewToken) => {
  let viewer3D;
  let app;

  //创建BimfaceSDKLoaderConfig
  let loaderConfig = new BimfaceSDKLoaderConfig();

  loaderConfig.viewToken = viewToken;
  //调用BimfaceSDKLoader的load方法加载模型
  BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);

  //加载成功回调函数
  function successCallback(viewMetaData) {
    //获取DOM元素
    let domShow = document.getElementById(id);
    //创建WebApplication3DConfig
    let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
    //设置创建WebApplication3DConfig的dom元素值
    webAppConfig.domElement = domShow;
    //创建WebApplication3D
    app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
    //添加待显示的模型
    app.addView(viewToken);
    //获取viewer3D对象
    viewer3D = app.getViewer();
  }

  //加载失败回调函数
  function failureCallback(error) {
    console.log(error);
  }
};
</script>
